<template>
	<div class="ml-auto">
		<n-popover
			trigger="click"
			placement="bottom-end"
			:show="showHot"
			:show-arrow="false"
			@update:show="handleUpdateShowHot">
			<template #trigger>
				<div
					class="h-[40px] p-4 rounded-lg bg-bg-3 flex items-center app-bg-react text-t-2 cursor-pointer">
					<div class="mr-1 whitespace-nowrap">
						{{ selectedMenuItemName }}
					</div>
					<base-icon name="filter" size="16" color="var(--color-text-3)" class="duration-300" />
				</div>
			</template>
			<div class="w-[131px] bg-gray-800 text-white rounded-md overflow-hidden shadow-lg">
				<ul class="flex flex-col">
					<li
						v-for="item in menuItems"
						:key="item.currency"
						:class="{
							'text-purple-400': selectedMenuItem === item.currency,
							'hover:bg-gray-700': true
						}"
						class="px-4 py-2 cursor-pointer"
						@click="selectMenuItem(item.currency)">
						{{ item.appName }}
					</li>
				</ul>
			</div>
		</n-popover>
	</div>
</template>
<script setup lang="ts">
import { BaseIcon } from '@/components/base'
import { NPopover } from 'naive-ui'
import { ref, computed, defineEmits, onMounted } from 'vue'
import { t } from '@/utils'
import { getWalletConfigList } from '@/api/wallet.ts'
import { useAppStore } from '@/store'

const appStore = useAppStore()
const emit = defineEmits(['update-sorting-values'])
// 控制“热门”菜单的弹出状态
const showHot = ref(false)
const selectedMenuItem = ref(0)
// 计算属性，用于显示选中项的名称
const selectedMenuItemName = computed(() => {
	const selectedItem = menuItems.value.find((item) => item.currency === selectedMenuItem.value)
	return selectedItem ? selectedItem.appName : null
})
// 动态获取热门菜单项
const menuItems = ref([{ currency: 0, appName: t('transactions.allCoin') }])
const selectMenuItem = (id: number) => {
	const selectedItem = menuItems.value.find((item) => item.currency === id)
	if (selectedItem) {
		selectedMenuItem.value = selectedItem.currency
	}
	showHot.value = false
	appStore.setTransactionFilter(id)
	emit('update-sorting-values', id)
}
// 更新“热门”菜单的显示状态
const handleUpdateShowHot = (val: boolean) => {
	showHot.value = val
}
const getWalletConfig = async () => {
	const { data } = await getWalletConfigList()
	menuItems.value = menuItems.value.concat(data as any)
}
onMounted(() => {
	getWalletConfig()
})
</script>
